<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="float-right">
        <el-button
          type="primary"
          @click="dialogAddMember = true"
        >添加成员</el-button>
      </div>
    </div>
    <div class="table_container">
      <el-table
        border
        v-loading="tableloading"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          property="userId"
          label="用户ID"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          property="userName"
          label="成员"
          align="center"
        >
        </el-table-column>

        <el-table-column
          property="roleName"
          label="群组"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="openChangeMember(scope.row)"
              size="small"
            >更改群组</el-button>
            <el-button
              type="text"
              @click="openChangePassword(scope.row.userId)"
              size="small"
            >重置密码</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="添加成员"
      :visible.sync="dialogAddMember"
      width="30%"
      center
    >
      <el-form
        :model="addMemberData"
        :rules="rules"
        ref="addMemberData"
      >
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="sysUserName"
        >
          <el-input v-model="addMemberData.sysUserName"></el-input>
        </el-form-item>
        <el-form-item
          label="昵称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="addMemberData.name"></el-input>
        </el-form-item>
        <el-form-item
          label="群组"
          :label-width="formLabelWidth"
          prop="roleId"
        >
          <el-select
            v-model="addMemberData.roleId"
            placeholder="请选择群组"
          >
            <el-option
              v-for="item in sysUserOption"
              :key="item.id"
              :label="item.role"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddMember = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addMemberForm('addMemberData')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="更改群组"
      :visible.sync="dialogChangeMember"
      width="30%"
      center
    >
      <el-form
        :model="changeMemberData"
        :rules="rules"
        ref="changeMemberData"
      >
        <el-form-item
          label="群组"
          :label-width="formLabelWidth"
          prop="roleId"
        >
          <el-select
            v-model="changeMemberData.roleId"
            placeholder="请选择群组"
          >
            <el-option
              v-for="item in sysUserOption"
              :key="item.id"
              :label="item.role"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogChangeMember = false">取 消</el-button>
        <el-button
          type="primary"
          @click="changeMemberForm('changeMemberData')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  fetchSysUserData,
  fetchSysRoleData,
  fetchAddsysUser,
  fetchResetPassword,
  fetchUpdateUser
} from "@/api/table";
import { formatDate, formatDateTime } from "@/utils/common";
export default {
  data() {
    return {
      tableData: [],
      sysUserOption: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      dialogAddMember: false,
      dialogChangeMember: false,
      formLabelWidth: "80px",
      changeMemberData: {
        roleId: "",
        sysUserId: ""
      },
      addMemberData: {
        name: "",
        sysUserName: "",
        roleId: ""
      },
      rules: {
        name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        sysUserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 40, message: "长度在 4 到 40 个字符", trigger: "blur" }
        ],
        roleId: [{ required: true, message: "请选择群组", trigger: "change" }]
      }
    };
  },
  created() {
    this.getSysUserData();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSysUserData();
    },
    addMemberForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addMember();
          this.dialogAddMember = false;
        } else {
          return false;
        }
      });
    },
    async addMember() {
      const adduser = await fetchAddsysUser({
        sysUserName: this.addMemberData.sysUserName,
        name: this.addMemberData.name,
        roleId: this.addMemberData.roleId
      });
      this.getSysUserData();
      this.$message({
        type: "success",
        message: "添加成功!"
      });
    },
    openChangePassword(e) {
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.changePassword(e);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置"
          });
        });
    },
    openChangeMember(e) {
      this.dialogChangeMember = true;
      this.changeMemberData.sysUserId = e.userId;
      this.changeMemberData.roleId = e.roleId;
    },
    changeMemberForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.changeMember();
          this.dialogChangeMember = false;
        } else {
          return false;
        }
      });
    },
    async changeMember(e) {
      await fetchUpdateUser({
        sysUserId: this.changeMemberData.sysUserId,
        roleId: this.changeMemberData.roleId
      });

      this.getSysUserData();
      this.$message({
        type: "success",
        message: "修改成功!"
      });
    },
    async changePassword(e) {
      await fetchResetPassword({
        sysUserId: e
      });
      this.$message({
        type: "success",
        message: "重置成功!"
      });
    },
    async getSysUserData() {
      this.tableloading = true;
      const SysUserData = await fetchSysUserData({
        pageSize: this.limit,
        pageNo: this.currentPage
      });
      const SysRoleData = await fetchSysRoleData();
      Promise.all([SysUserData, SysRoleData]);
      this.tableData = [];
      this.sysUserOption = [];
      this.tableloading = false;
      this.total = SysUserData.data.total;
      SysUserData.data.list.forEach(item => {
        const tableData = {};
        SysRoleData.data.forEach(role => {
          if (item.roleId == role.id) {
            tableData.roleName = role.role;
          }
        });
        tableData.userName = item.name;
        tableData.userId = item.id;
        tableData.roleId = item.roleId;
        this.tableData.push(tableData);
      });
      SysRoleData.data.forEach(role => {
        const option = {};
        option.role = role.role;
        option.id = role.id;
        this.sysUserOption.push(option);
      });
    }
  }
};
</script>
